import React, { useState } from 'react';
import { Card, Button, Space, Typography, Divider, Tag } from 'antd';
import MyCustomer from './MyCustomer';

const { Title, Paragraph } = Typography;

const SmartCustomerExample: React.FC = () => {
  const [selectedExample, setSelectedExample] = useState<string>('');

  const exampleQuestions = [
    {
      category: '问候类',
      questions: [
        { text: '你好', tag: '问候' },
        { text: '您好', tag: '问候' },
        { text: 'hi', tag: '问候' }
      ]
    },
    {
      category: '产品咨询',
      questions: [
        { text: '你们有什么产品？', tag: '产品' },
        { text: '服务怎么样？', tag: '产品' },
        { text: '商品质量如何？', tag: '产品' }
      ]
    },
    {
      category: '价格咨询',
      questions: [
        { text: '价格是多少？', tag: '价格' },
        { text: '费用怎么算？', tag: '价格' },
        { text: '多少钱？', tag: '价格' }
      ]
    },
    {
      category: '技术支持',
      questions: [
        { text: '技术问题怎么解决？', tag: '技术' },
        { text: '系统出现故障', tag: '技术' },
        { text: '有bug需要修复', tag: '技术' }
      ]
    },
    {
      category: '售后服务',
      questions: [
        { text: '售后服务怎么样？', tag: '售后' },
        { text: '可以维修吗？', tag: '售后' },
        { text: '保修期多久？', tag: '售后' }
      ]
    },
    {
      category: '联系方式',
      questions: [
        { text: '怎么联系你们？', tag: '联系' },
        { text: '电话号码是多少？', tag: '联系' },
        { text: '邮箱地址是什么？', tag: '联系' }
      ]
    },
    {
      category: '工作时间',
      questions: [
        { text: '什么时候上班？', tag: '时间' },
        { text: '营业时间是什么？', tag: '时间' },
        { text: '周末上班吗？', tag: '时间' }
      ]
    },
    {
      category: '订单相关',
      questions: [
        { text: '订单状态查询', tag: '订单' },
        { text: '什么时候发货？', tag: '订单' },
        { text: '怎么付款？', tag: '订单' }
      ]
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <Title level={2}>智能客服示例</Title>
      
      <Card style={{ marginBottom: '20px' }}>
        <Title level={4}>智能回复功能演示</Title>
        <Paragraph>
          这个智能客服系统能够根据用户的问题内容自动生成相应的回复。
          支持多种问题类型，包括问候、产品咨询、技术支持、售后服务等。
        </Paragraph>
        
        <Divider />
        
        <Title level={5}>问题类型示例</Title>
        <Space wrap>
          {exampleQuestions.map((category, index) => (
            <div key={index} style={{ marginBottom: '16px' }}>
              <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{category.category}</div>
              <Space wrap>
                {category.questions.map((question, qIndex) => (
                  <Button
                    key={qIndex}
                    size="small"
                    type={selectedExample === question.text ? 'primary' : 'default'}
                    onClick={() => setSelectedExample(question.text)}
                  >
                    {question.text}
                    <Tag color="blue" style={{ marginLeft: '4px' }}>{question.tag}</Tag>
                  </Button>
                ))}
              </Space>
            </div>
          ))}
        </Space>
      </Card>

      <div style={{ display: 'flex', gap: '20px', height: '600px' }}>
        {/* 聊天界面 */}
        <div style={{ flex: 1 }}>
          <MyCustomer
            serverUrl="http://localhost:5000"
            customerId="smart_demo_001"
            customerName="演示用户"
            isCustomerService={false}
            serviceName="智能客服"
          />
        </div>
        
        {/* 功能说明 */}
        <Card style={{ width: '300px' }}>
          <Title level={4}>智能回复特性</Title>
          
          <div style={{ marginBottom: '16px' }}>
            <Title level={5}>🎯 智能识别</Title>
            <Paragraph style={{ fontSize: '12px' }}>
              根据关键词自动识别问题类型，提供针对性回复
            </Paragraph>
          </div>
          
          <div style={{ marginBottom: '16px' }}>
            <Title level={5}>⚡ 即时响应</Title>
            <Paragraph style={{ fontSize: '12px' }}>
              1秒内生成回复，无需等待人工客服
            </Paragraph>
          </div>
          
          <div style={{ marginBottom: '16px' }}>
            <Title level={5}>🎨 自然对话</Title>
            <Paragraph style={{ fontSize: '12px' }}>
              回复语言自然流畅，符合客服对话习惯
            </Paragraph>
          </div>
          
          <div style={{ marginBottom: '16px' }}>
            <Title level={5}>📚 知识丰富</Title>
            <Paragraph style={{ fontSize: '12px' }}>
              涵盖产品、价格、技术、售后等多个领域
            </Paragraph>
          </div>
          
          <Divider />
          
          <Title level={5}>使用说明</Title>
          <Paragraph style={{ fontSize: '12px' }}>
            1. 在左侧聊天界面输入问题<br/>
            2. 系统会自动识别问题类型<br/>
            3. 生成相应的智能回复<br/>
            4. 支持连续对话和上下文理解
          </Paragraph>
        </Card>
      </div>
    </div>
  );
};

export default SmartCustomerExample; 